<template>
	<el-dialog :visible.sync="value.show" append-to-body>
		<div class="firstLevelHeading">新能源专有数据</div>
		<div class="secondLevelHeading">船舶识别号:CN19952510073</div>
		<el-form :model="formData" ref="form" label-width="200px">
			<el-row>
				<el-col span="12">
					<el-form-item label="推进形式:">
						{{ '混合动力' }}
					</el-form-item>
				</el-col>
				<el-col span="12">
					<el-form-item label="充换电形式:">
						{{ '换电' }}
					</el-form-item>
				</el-col>
				<el-col span="12">
					<el-form-item label="电池仓:">
						{{ '4个' }}
					</el-form-item>
				</el-col>
				<el-col span="12">
					<el-form-item label="电池系统:">
						{{ '1个' }}
					</el-form-item>
				</el-col>
				<el-col span="12">
					<el-form-item label="额定电量:">
						{{ '215kWH' }}
					</el-form-item>
				</el-col>
				<el-col span="12">
					<el-form-item label="额定电量:">
						{{ '380V' }}
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
	</el-dialog>
</template>

<script>
export default {
	name: 'newEnergyProprietaryData',
	data() {
		return {
			formData: {}
		};
	},
	props: {
		value: {
			show: {
				type: Boolean,
				default: false
			}
		}
	},
	methods: {
		// 初始化组件
		initComponent() {
			// this.formData = this.value
		}
	},
	mounted() {
		this.$watch('value.show', (show) => {
			if (!show) return;
			this.initComponent();
		});
		this.initComponent();
	}
};
</script>
<style lang="scss" scoped>
.firstLevelHeading {
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 8px;
}
.secondLevelHeading {
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 8px;
}
::v-deep .el-form-item__label {
	font-size: 16px !important;
}
::v-deep .el-form-item__content {
	font-size: 16px !important;
	font-weight: bold;
}
::v-deep .el-dialog__body {
	padding-top: 8px !important;
}
::v-deep .el-dialog__header {
  padding-top: 10px;
}
</style>
